/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置
  // 不在 content 包括的文件内编写的 class，不会生成对应的工具类
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],

  theme: {
    extend: {
      keyframes: {
        'gradient-in': {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },
      },
      animation: {
        'gradient-in': 'gradient-in 0.5s ease-in-out',
      },
      width: {
        '1/7': '14.2857143%',
      },
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      text: 'rgb(var(--color-text) / <alpha-value>)',
      link: 'rgb(var(--color-link) / <alpha-value>)',
      white: 'rgb(var(--color-white) / <alpha-value>)',
      black: 'rgb(var(--color-black) / <alpha-value>)',
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      danger: 'rgb(var(--color-danger) / <alpha-value>)',
      success: 'rgb(var(--color-success) / <alpha-value>)',
      warn: 'rgb(var(--color-warn) / <alpha-value>)',
      disabled: 'rgb(var(--color-disabled) / <alpha-value>)',
      placeholder: 'rgb(var(--color-placeholder) / <alpha-value>)',
      bg: 'rgb(var(--color-bg) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
      border: 'rgb(var(--color-border) / <alpha-value>)',
    },
  },
  // 其他配置项
  // ...
  corePlugins: {
    // 不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false,
  },
  plugins: [
    require('tailwindcss-safe-area'),
    function ({ addUtilities }) {
      const newUtilities = {
        '.dashed-line': {
          height: '1px',
          background:
            'repeating-linear-gradient(to right, #CBD2DA, #CBD2DA 5px, transparent 5px, transparent 7px)',
        },
      };

      addUtilities(newUtilities);
    },
    require('tailwind-scrollbar'),
  ],
};
